#chatbox{
	overflow-x:auto;
    position:relative;
    width: 400px;
    height: 700px;
    background-color: bisque;
}
#head{
    width: 100%;
    height:50px;
    background-color: black;
}
#headpading{
    width: 100%;
    height:50px;
    background-color: black;
}
.listsub{
	width:100%;
	height:80px;
	background-color: red;
}
.friendHeadIcon{
	margin-top:15px;
	margin-left:15px;
	width:50px;
	height:50px;
}
.friendName{
	width:200px;
	
	position:relative;
	top:-70px;
	left:200px;
}

.newmessage{
	width:300px;
	height:50px;
	position:relative;
	top:-70px;
	left:70px;
	background-color:black;
}
#headname{
    position:absolute;
    top:10px;
    width: 100%;
    text-align: center;
    color: white;
    font-size: 20px;
}
#inputbox{
    position:absolute;
    width: 100%;
    height:5%;
    background-color: aqua;  
    bottom:0%;
}
#textbox{
    position:absolute;
    top:10%;
    left: 1%;
    width: 80%;
    height: 60%;

}#sendbutton{
    position:absolute;
    top: 20%;
    right:18px;
    width: 10%;
    height: 60%;
}
#chating{
    overflow-y:auto;
    width:400px;
    height:87%
    
}
.orderchat{
    border-radius: 10px;
    position:relative;
    height: auto;
    width: 200px;
    right:-100px;
    background-color: red;
    font-size: 20px;
}
.orderimg{
    position:relative;
    width: 50px;
    height: 50px;
    right:-83%;
    
}
.order{
    position:relative;
    width: 400px;
     margin-top:30px;
}
.otherchat{
    border-radius: 10px;
    position:relative;
    height: auto;
    width: 200px;
    left:100px;
    background-color: red;
    font-size: 20px;
}
.otherimg{
    
    position:relative;
    width: 50px;
    height: 50px;
    left:5%;
    
}
.othername{
  
    height: 50px;
    position:relative;
    float: left;
    top:-50px;
    left:80px;
    font-weight:900;
    font-size:20px;

}

.other{
    position:relative;
    width: 400px;
    margin-top:30px;
    
}
.headimg{
    border-radius: 25px;
    width: 100%;
    height: 100%;
}